<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SAMSUNG三星商城后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="../x-admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../x-admin/css/font.css">
    <link rel="stylesheet" href="../../../x-admin/css/xadmin.css">


    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="../x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../x-admin/js/xadmin.js"></script>



</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="htindex">SAMSUNG</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">admin</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">个人信息</a></dd>
                <dd><a href="">切换帐号</a></dd>
                <dd><a href="login">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="index">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="htindex">
                        <i class="iconfont">&#xe761;</i>
                        欢迎页面
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        商品管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="htgoodslist">
                                <i class="iconfont">&#xe6a7;</i>
                                商品列表
                            </a>
                        </li>
                        <li>
                            <a href="goodscategory">
                                <i class="iconfont">&#xe6a7;</i>
                                商品分类
                            </a>
                        </li>
                        <li>
                            <a href="goodsadd">
                                <i class="iconfont">&#xe6a7;</i>
                                商品添加
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        订单管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="htorders">
                                <i class="iconfont">&#xe6a7;</i>
                                订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        用户管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="/htuser">
                                <i class="iconfont">&#xe6a7;</i>
                                用户列表
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
        <%--商品id--%>
        <%--商品名称--%>
    <form id="forminput">
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">商品名称</span>
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="level-name" required="" lay-verify="required"
                       autocomplete="off" value="" class="layui-input" placeholder="名称">
            </div>
        </div>
        <%--商品价格--%>
        <div class="layui-form-item">
            <label for="level-price" class="layui-form-label">
                <span class="x-red">商品标注价格</span>
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-price" name="level-price" required="" value="" lay-verify="required"
                       autocomplete="off" class="layui-input" placeholder="价格">
            </div>
        </div>
        <%--商品类别--%>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">商品一级类别</span>
                </label>
                <div class="layui-input-inline">
                    <%--        <input type="text" id="level-leibie" name="level-kiss" required="" value="0-1000" lay-verify="required"--%>
                    <%--               autocomplete="off" class="layui-input">--%>
                    <select name="level-leibietwo" id="level-leibie" required="" lay-verify="required" autocomplete="off" class="layui-input">
                        <c:forEach items="${successions}" var="x">
                            <option value="${x.xid}">${x.xname}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">商品二级类别</span>
            </label>
            <div class="layui-input-inline">
                <%--        <input type="text" id="level-leibie" name="level-kiss" required="" value="0-1000" lay-verify="required"--%>
                <%--               autocomplete="off" class="layui-input">--%>
                <select name="level-leibieone" id="level-leibie" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    <c:forEach items="${classifications}" var="x">
                        <option value="${x.lid}">${x.lname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <%--商品状态--%>
            <div class="layui-form-item">
                <label for="level-zhuangtai" class="layui-form-label">
                    <span class="x-red">商品状态</span>
                </label>
                <div class="layui-input-inline">
                    <%--        <input type="text" id="level-leibie" name="level-kiss" required="" value="0-1000" lay-verify="required"--%>
                    <%--               autocomplete="off" class="layui-input">--%>
                    <select name="level-zhuangtai" id="level-zhuangtai" required="" lay-verify="required" autocomplete="off" class="layui-input">
                            <option value="true">正常销售</option>
                            <option value="false">停售</option>
                    </select>
                </div>
            </div>
        <%--商品主图片上传--%>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">商品主图片</span>
            </label>
            <div class="upload">+
                    <input id="yyy" type="file" name="myfile">
                <img id="myimg" width="100" height="100">
            </div>
        </div>
        <%--商品前端预览图--%>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button id="addgoods" lay-filter="save" class="layui-btn" type="button" onclick="addgood()">
                添加商品
            </button>
        </div>
<%--        添加商品详情--%>
    </form>
    <input id="sidhidden" type="hidden" value="">
    <div id="addxq" style="display: none">
    <xblock><button class="layui-btn" onclick="member_add('添加详情','goodsxq?v=addgoodsxq','600','500')"><i class="layui-icon">&#xe608;</i>添加详情</button><button class="layui-btn" onclick="shuaxin()">刷新</button><button class="layui-btn" style="float: right" onclick="baocun()">保存</button></xblock>
    <table class="layui-table" id="LAY-user-table">
        <thead>
        <tr>
            <th>
                详情ID
            </th>
            <th>
                名称
            </th>
            <th>
                颜色
            </th>
            <th>
                内存
            </th>
            <th>
                价格
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${details}" var="x">
            <tr>
                <td>
                        ${x.sxid}
                </td>
                <td>
                        ${x.commodity.sname}
                </td>
                <td>
                        ${x.commoditycolor.yname}
                </td>
                <td >
                        ${x.commoditymemory.nname}
                </td>
                <td >
                        ${x.xprice}
                </td>
                <td class="td-manage">
                    <a style="text-decoration:none"  onclick="member_edit('修改价格','goodsxqedit?xprice=${x.xprice}&sxid=${x.sxid}','10001','600','400')"
                       href="javascript:;" title="修改价格">
                        <i class="layui-icon" style="font-size: 20px">&#xe631;</i>
                    </a>
                    <a title="删除" href="javascript:;" onclick="member_del(this,${x.sxid})"
                       style="text-decoration:none">
                        <i class="layui-icon" style="font-size: 20px">&#xe640;</i>
                    </a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    </div>

    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 底部开始 -->

<!-- 底部结束 -->
<!-- 背景切换开始 -->
<div class="bg-changer">
    <div class="swiper-container changer-list">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="item" src="../x-admin/images/a.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/b.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/c.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/d.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/e.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/f.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/g.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/h.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/i.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/j.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="../x-admin/images/k.jpg" alt=""></div>
            <div class="swiper-slide"><span class="reset">初始化</span></div>
        </div>
    </div>
    <div class="bg-out"></div>
    <div id="changer-set"><i class="iconfont">&#xe696;</i></div>
</div>
<!-- 背景切换结束 -->
<!-- 页面动态效果 -->
<script>

        let reader = new FileReader();

        let file = document.querySelector("input[name='myfile']");
        console.log(file)
        file.addEventListener("change",function (){
            let alk = event.target.files[0]
            reader.readAsDataURL(alk);
        })

        reader.onload=function (){
            document.querySelector("#myimg").src=reader.result;
        }

        function addgood(){
            var element = document.querySelector("#forminput");
            var formData = new FormData(element);

            if (document.querySelector("#level-name").value == ""){
                layer.msg("请填写商品名!", {icon: 2 ,time: 1000});
                return null;
            }
            if (document.querySelector("#level-price").value == ""){
                layer.msg("请填写商品价格", {icon: 2 ,time: 1000});
                return null;
            }
            if (document.querySelector("#myimg").src==""){
                layer.msg("请添加商品图片", {icon: 2 ,time: 1000});
                return null;
            }
            $.ajax({
                url:"/goodsadd?v=addgoods",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function (resp) {
                    if (resp>0){
                        layer.msg("添加成功！请继续添加商品详情！",{icon:1,time:1000});
                        var element1 = document.querySelector("#addxq");
                        element1.style.display = "block";
                        document.querySelector("#sidhidden").value = resp;
                    }else{
                        layer.msg("添加失败！",{icon:2})
                    }
                }

            })
        }

        //类别添加
        function member_add(title,url,w,h){
            var sid = document.querySelector("#sidhidden").value;
            x_admin_show(title,url+"&sid="+sid,w,h);
        }

        function shuaxin(){
            var sid = document.querySelector("#sidhidden").value;
            $.ajax({
                url:"/goodsxq?v=shuaxin",
                type: "post",
                data: {
                    sid
                },
                success:function (r) {
                    $("#LAY-user-table").load(location.href + " #LAY-user-table","");
                }
            })

        }
        function baocun(){
            location.href="/htgoodslist";
        }

</script>

</body>
</html>